<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="MAESS 智能监控系统 - 实时监控Agent状态、任务队列和系统负载" />
    <meta name="keywords" content="MAESS, 监控, Agent, 任务队列, 系统监控" />
    <title>MAESS 智能监控台</title>
    
    <!-- 使用系统字体栈，避免外部依赖 -->
    <style>
      :root {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }
    </style>
    
    <!-- 使用内联SVG图标，避免外部依赖 -->
    
    <!-- 主题颜色 -->
    <meta name="theme-color" content="#3b82f6">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    
    <!-- PWA 支持 -->
    <link rel="manifest" href="/manifest.json">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="MAESS">
    
    <style>
      /* 加载动画 - 专业科技感设计 */
      .loading-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: opacity 0.3s ease;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      }
      
      .loading-content {
        text-align: center;
        color: #ffffff;
        padding: 0 20px;
        max-width: 400px;
      }
      
      /* MAESS Logo */
      .maess-logo {
        width: 90px;
        height: 90px;
        margin: 0 auto 16px;
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        font-weight: 600;
        color: white;
        box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3);
        animation: logoBreath 3s ease-in-out infinite;
      }
      
      @keyframes logoBreath {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.05); opacity: 0.9; }
      }
      
      /* 科技感环形进度动画 */
      .loading-spinner {
        width: 60px;
        height: 60px;
        position: relative;
        margin: 0 auto 24px;
      }
      
      .spinner-ring {
        position: absolute;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
      }
      
      .spinner-outer {
        width: 60px;
        height: 60px;
        border: 2px solid rgba(59, 130, 246, 0.2);
      }
      
      .spinner-inner {
        width: 60px;
        height: 60px;
        border: 3px solid transparent;
        border-top: 3px solid #3b82f6;
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        animation: spin 0.8s linear infinite, glow 3s ease-in-out infinite;
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      @keyframes glow {
        0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
        50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); }
      }
      
      /* 加载容器阴影 */
      .loading-container {
        background: rgba(30, 41, 59, 0.8);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        padding: 40px 32px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 16px rgba(59, 130, 246, 0.15);
        border: 1px solid rgba(59, 130, 246, 0.2);
      }
      
      /* 网格纹理背景 */
      .loading-screen::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
          linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
          linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
        background-size: 20px 20px;
        pointer-events: none;
      }
      
      .loading-text {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #ffffff;
      }
      
      .loading-subtext {
        font-size: 14px;
        color: #94a3b8;
        margin-bottom: 16px;
        min-height: 20px;
        transition: all 0.3s ease;
      }
      
      /* 进度百分比 */
      .loading-progress {
        font-size: 14px;
        color: #3b82f6;
        font-weight: 500;
        margin-top: 12px;
      }
      
      .progress-bar {
        width: 100%;
        height: 4px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
        margin-top: 8px;
        overflow: hidden;
      }
      
      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #3b82f6, #60a5fa);
        border-radius: 2px;
        transition: width 0.3s ease;
        box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
      }
      
      /* 错误状态 */
      .error-state {
        display: none;
        text-align: center;
      }
      
      .error-icon {
        font-size: 48px;
        color: #ef4444;
        margin-bottom: 16px;
      }
      
      .error-title {
        font-size: 18px;
        color: #ef4444;
        font-weight: 600;
        margin-bottom: 8px;
      }
      
      .error-message {
        font-size: 14px;
        color: #94a3b8;
        margin-bottom: 20px;
        line-height: 1.5;
      }
      
      .retry-button {
        background: #3b82f6;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 8px 24px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
      }
      
      .retry-button:hover {
        background: #2563eb;
        transform: translateY(-1px);
      }
      
      /* 浏览器兼容提示 */
      .browser-warning {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: #fffbeb;
        border: 1px solid #fbbf24;
        border-radius: 8px;
        padding: 16px;
        color: #92400e;
        display: none;
        z-index: 10000;
        max-width: 400px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      
      .browser-warning-icon {
        color: #f59e0b;
        margin-right: 8px;
      }
      
      .browser-warning-close {
        margin-left: auto;
        background: none;
        border: none;
        color: #92400e;
        cursor: pointer;
        font-size: 16px;
      }
      
      /* 响应式设计 */
      @media (max-width: 768px) {
        .maess-logo {
          width: 70px;
          height: 70px;
          font-size: 24px;
        }
        
        .loading-spinner {
          width: 40px;
          height: 40px;
        }
        
        .spinner-outer, .spinner-inner {
          width: 40px;
          height: 40px;
        }
        
        .loading-text {
          font-size: 20px;
        }
        
        .loading-subtext {
          font-size: 13px;
        }
        
        .loading-container {
          padding: 30px 20px;
        }
      }
      
      @media (min-width: 1920px) {
        .loading-container {
          transform: scale(1.1);
        }
      }
    </style>
  </head>
  <body>
    <!-- 加载屏幕 -->
    <div id="loading-screen" class="loading-screen">
      <div class="loading-container">
        <div class="loading-content">
          <!-- MAESS Logo -->
          <div class="maess-logo" aria-label="MAESS系统Logo">M</div>
          
          <!-- 科技感环形进度动画 -->
          <div class="loading-spinner" aria-label="系统加载中，请稍候">
            <div class="spinner-ring spinner-outer"></div>
            <div class="spinner-ring spinner-inner"></div>
          </div>
          
          <div class="loading-text">MAESS 智能监控台</div>
          <div class="loading-subtext" id="loading-subtext">正在初始化监控模块...</div>
          
          <!-- 进度百分比 -->
          <div class="loading-progress" id="loading-progress">0%</div>
          <div class="progress-bar">
            <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
          </div>
        </div>
        
        <!-- 错误状态 -->
        <div class="error-state" id="error-state">
          <div class="error-icon">
            <i class="fas fa-exclamation-triangle"></i>
          </div>
          <div class="error-title">加载失败</div>
          <div class="error-message">系统加载异常，请检查网络或联系管理员</div>
          <button class="retry-button" id="retry-button" aria-label="重试加载系统">重新加载</button>
        </div>
      </div>
    </div>
    
    <!-- 浏览器兼容提示 -->
    <div class="browser-warning" id="browser-warning">
      <div style="display: flex; align-items: center;">
        <i class="fas fa-exclamation-triangle browser-warning-icon"></i>
        <span>您的浏览器版本过旧，可能影响系统性能</span>
        <button class="browser-warning-close" id="browser-warning-close">×</button>
      </div>
    </div>
    
    <!-- 应用容器 -->
    <div id="app"></div>
    
    <!-- 脚本 -->
    <script type="module" src="/src/main.js"></script>
    
    <script>
      // 专业加载管理系统
      class LoadingManager {
        constructor() {
          this.loadingScreen = document.getElementById('loading-screen');
          this.loadingContent = document.querySelector('.loading-content');
          this.errorState = document.getElementById('error-state');
          this.subtext = document.getElementById('loading-subtext');
          this.progress = document.getElementById('loading-progress');
          this.progressFill = document.getElementById('progress-fill');
          this.retryButton = document.getElementById('retry-button');
          this.browserWarning = document.getElementById('browser-warning');
          this.browserWarningClose = document.getElementById('browser-warning-close');
          
          this.currentProgress = 0;
          this.loadingStages = [
            { text: '正在初始化监控模块...', duration: 2000 },
            { text: '正在连接服务端...', duration: 1800 },
            { text: '正在加载数据可视化组件...', duration: 2200 },
            { text: '正在校验权限...', duration: 1500 },
            { text: '正在准备监控面板...', duration: 1000 }
          ];
          this.currentStage = 0;
          this.loadingTimeout = null;
          this.stageTimeout = null;
          
          this.init();
        }
        
        init() {
          this.setupEventListeners();
          this.startLoading();
          this.checkBrowserSupport();
          this.setupLoadingTimeout();
        }
        
        setupEventListeners() {
          this.retryButton.addEventListener('click', () => this.retryLoading());
          this.browserWarningClose.addEventListener('click', () => this.hideBrowserWarning());
          
          // 监听Vite资源加载
          if (window.__vite__ && window.__vite__.on) {
            window.__vite__.on('vite:preloadError', (error) => {
              console.error('Vite预加载错误:', error);
              this.showError('资源加载失败，请检查网络连接');
            });
          }
        }
        
        startLoading() {
          this.updateStage();
          this.simulateProgress();
        }
        
        updateStage() {
          if (this.currentStage < this.loadingStages.length) {
            const stage = this.loadingStages[this.currentStage];
            this.subtext.textContent = stage.text;
            this.subtext.style.color = this.currentStage === 0 ? '#3b82f6' : '#94a3b8';
            
            this.stageTimeout = setTimeout(() => {
              this.currentStage++;
              this.updateStage();
            }, stage.duration);
          }
        }
        
        simulateProgress() {
          const interval = setInterval(() => {
            if (this.currentProgress < 95) {
              this.currentProgress += Math.random() * 3 + 1;
              if (this.currentProgress > 95) this.currentProgress = 95;
              this.updateProgress(this.currentProgress);
            } else {
              clearInterval(interval);
            }
          }, 200);
        }
        
        updateProgress(progress) {
          const roundedProgress = Math.round(progress);
          this.progress.textContent = `${roundedProgress}%`;
          this.progressFill.style.width = `${progress}%`;
        }
        
        completeLoading() {
          this.updateProgress(100);
          
          // 优化消失动画
          const spinner = document.querySelector('.loading-spinner');
          if (spinner) {
            spinner.style.transform = 'scale(0.8)';
            spinner.style.opacity = '0';
          }
          
          setTimeout(() => {
            this.loadingScreen.style.opacity = '0';
            setTimeout(() => {
              this.loadingScreen.style.display = 'none';
              this.showAppEntryAnimation();
            }, 300);
          }, 400);
        }
        
        showAppEntryAnimation() {
          const app = document.getElementById('app');
          if (app) {
            app.style.opacity = '0';
            app.style.transform = 'translateY(10px)';
            app.style.transition = 'all 0.4s ease-in';
            
            setTimeout(() => {
              app.style.opacity = '1';
              app.style.transform = 'translateY(0)';
            }, 50);
          }
        }
        
        showError(message = '系统加载异常，请检查网络或联系管理员') {
          clearTimeout(this.stageTimeout);
          clearTimeout(this.loadingTimeout);
          
          this.loadingContent.style.display = 'none';
          this.errorState.style.display = 'block';
          document.querySelector('.error-message').textContent = message;
          
          console.error('MAESS加载错误:', {
            message: message,
            timestamp: new Date().toISOString(),
            userAgent: navigator.userAgent,
            url: window.location.href
          });
        }
        
        retryLoading() {
          this.currentProgress = 0;
          this.currentStage = 0;
          this.loadingContent.style.display = 'block';
          this.errorState.style.display = 'none';
          this.updateProgress(0);
          this.startLoading();
          this.setupLoadingTimeout();
        }
        
        setupLoadingTimeout() {
          this.loadingTimeout = setTimeout(() => {
            this.showError('加载超时，请检查网络连接');
          }, 30000); // 30秒超时
        }
        
        checkBrowserSupport() {
          const features = [
            { name: 'requestAnimationFrame', supported: 'requestAnimationFrame' in window },
            { name: 'Promise', supported: 'Promise' in window },
            { name: 'fetch', supported: 'fetch' in window },
            { name: 'CSS Grid', supported: CSS && CSS.supports('display', 'grid') }
          ];
          
          const unsupported = features.filter(f => !f.supported);
          if (unsupported.length > 0) {
            this.showBrowserWarning(unsupported);
          }
        }
        
        showBrowserWarning(unsupportedFeatures) {
          const featureNames = unsupportedFeatures.map(f => f.name).join('、');
          this.browserWarning.querySelector('span').innerHTML = 
            `<i class="fas fa-exclamation-triangle browser-warning-icon"></i>
             您的浏览器不支持 ${featureNames}，可能影响系统性能
             <a href="https://www.google.com/chrome/" target="_blank" style="color: #3b82f6; margin-left: 8px;">下载Chrome</a>`;
          this.browserWarning.style.display = 'block';
        }
        
        hideBrowserWarning() {
          this.browserWarning.style.display = 'none';
        }
      }
      
      // 初始化加载管理器
      const loadingManager = new LoadingManager();
      
      // 监听页面加载完成
      window.addEventListener('load', function() {
        loadingManager.completeLoading();
      });
      
      // 监听资源加载错误
      window.addEventListener('error', function(e) {
        console.error('资源加载错误:', e);
        if (e.target && (e.target.tagName === 'SCRIPT' || e.target.tagName === 'LINK')) {
          loadingManager.showError('资源加载失败，请检查网络连接');
        }
      }, true);
      
      // 监听未处理的Promise拒绝
      window.addEventListener('unhandledrejection', function(e) {
        console.error('未处理的Promise拒绝:', e);
        loadingManager.showError('系统初始化失败，请刷新页面重试');
      });
    </script>
  </body>
</html>